<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>IFE ECMAScript</title>
</head>

<body>
  <h2>控制台查看内容</h2>
  <div id="wrapper">
    <div id="news-top" class="section">
      <h3>Some title</h3>
      <div class="content">
        <ul>
          <li>
            <span>HTML</span>
            <a href="">Some Link1</a>
          </li>
          <li>
            <span>JS</span>
            <a class="active" href="">Some Link2</a>
          </li>
          <li>
            <span>CSS</span>
            <a href="">Some Link3</a>
          </li>
          <li>
            <span>JS</span>
            <a href="">Some Link4</a>
          </li>
        </ul>
      </div>
      <img src="">
      <p class="">Some Text</p>
    </div>
    <div id="news-normal" class="section">
      <h3>Some title</h3>
      <div class="content">
        <ul>
          <li>
            <span>HTML</span>
            <a href="">Some Link1</a>
          </li>
          <li>
            <span>HTML</span>
            <a href="">Some Link2</a>
          </li>
          <li>
            <span>JS</span>
            <a class="active" href="#">Some Link3</a>
          </li>
          <li>
            <span>CSS</span>
            <a href="">Some Link4</a>
          </li>
        </ul>
      </div>
      <img src="">
      <p class="">Some Text</p>
    </div>
  </div>
  <script>

    function getAllListItem() {
      // 返回页面中所有li标签
      return document.getElementsByTagName('li');
    }
    console.log(getAllListItem());

    function findAllHtmlSpanInOneSection(sectionId) {
      // 返回某个section下所有span中内容为HTML的span标签
      let spanNodes = Array.from(document.getElementById(sectionId)
                                         .getElementsByTagName('span'))
      return spanNodes.filter(x => x.innerText === 'HTML')
    }
    console.log(findAllHtmlSpanInOneSection('wrapper'));

    function findListItem(sectionId, spanCont) {
      // 返回某个section下，所有所包含span内容为spanCont的LI标签
      let spanNodes = Array.from(document.getElementById(sectionId)
                                         .getElementsByTagName('li'))
      return spanNodes.filter(x => {
                                let sNode = x.getElementsByTagName('span');                                
                                for(let i = sNode.length-1;i>=0;i--) {
                                  if(sNode[i].innerText === spanCont) return true;
                                }
                                return false;
                              })
    }
    console.log(findListItem('wrapper','JS'));
    function getActiveLinkContent(sectionId) {
      // 返回某个section下，class为active的链接中包含的文字内容
      return Array.from(document.getElementById(sectionId).getElementsByTagName('a')).filter(x => x.className === 'active').map(x => x.innerText);
    }
    console.log(getActiveLinkContent('wrapper'));
    
  </script>
</body>

</html>